import { useEffect, useState } from "react";
import { useHistory, useLocation } from "react-router";
import { NavBar,Image,Input } from 'antd-mobile'
import Sty from "../../style/square/squareDetail.module.css";
import { EyeOutline } from 'antd-mobile-icons'


export default () => {
  let location = useLocation();
  let history = useHistory()
  let { state } = location
  
  const [detailData,setDetailData]:any=useState({ id: 1, img_src: require("../../images/welf_news_img.png").default, time: '2021-12-20', title: '“恒昌精准扶贫之路”媒体沟通会在京举办', des: '落实党和国家的普惠扶贫要求，更有效地为弱势人群、弱势产业和弱势地区提供方便快捷、价格合理的金融服务，在当今众多金融企业中，正在成为越来越受关注的新供给。在新型金融精准扶贫模式中，恒昌公司探索的“基层党组织+产业支持+互联网金融”的新模式因其对区域实体经济的全方位支持，近期更是获得了业内的高度关注。在此背景下，近日，恒昌公司于北京“金融客咖啡”举办了媒体沟通会，恒昌公司副总裁张然做了现场演讲，详细阐述了恒昌近年来的精准扶贫之路。此外，会议还邀请到了联合国联合开发计划署（下称UNDP）成员UNDP驻华代表处国别副主任何佩德（Patrick Haverman）、UNDP驻华代表处《贫困地区农户创业的金融需求与供给研究》课题协调人曾梦以及媒体嘉宾。会上，恒昌与UNDP就之前的精准扶贫方面的战略合作进行了总结和交流，中西方的思想交流与碰撞，也令本次媒体沟通会更为专业化、开放化、国际化。', fabulous: 123, see: 123, comment: 123 ,nickAttr: require("../../images/20211220102552.jpg").default, nickName: '你得支棱起来啊', })
  // useEffect(() => {
  //    setDetailData(state)
  //  },[])
  const back = () => history.goBack();
  
  return <>
   
    <div className={Sty.top}>
       <NavBar onBack={back}>新闻详情</NavBar>
    </div>
    
    <div className={Sty.detail_box}>
      <div className={Sty.weaf_title}>{ detailData.title}</div>
      <p className={Sty.weaf_time}>时间:{ detailData.time}&nbsp;&nbsp;&nbsp;来源:中国公益新闻网</p>
    
      
      <div className={Sty.detailData_des}>
        {detailData.des}
      </div>
        <div className={Sty.top_banner}>
        <img src={detailData.img_src} alt=""/>
      </div>
      <div className={Sty.user_r_box}>
            <div> <i className={Sty.fabulous}></i><span>{ detailData.fabulous}</span></div>
            <div>
              <EyeOutline fontSize={12} />
              <span></span>{detailData.see}</div>
          <div><i className={Sty.common}></i><span></span>{detailData.comment}</div>
          
        </div>
      
      {/* 留言 */}
       <div className={Sty.detailData_publisher}>
        <div className={Sty.detailData_publisher_title}>全部评论</div>
        <ul>
        <li className={Sty.leavingItem}>
            <div className={Sty.user}>
          <div className={Sty.user_l_box}>
               <div className={Sty.user_l}>
            <Image
            src={detailData.nickAttr}
            width={32}
            height={32}
            fit='cover'
                   style={{ borderRadius: 16 }} />
         <div className={Sty.nickName}>{ detailData.nickName}</div>
          </div>
          </div>
          <div className={Sty.user_r_item1}><i></i></div>
            </div>
             <div className={Sty.leaving}>
            { detailData.des}
          </div>
          </li>
         
         <li className={Sty.leavingItem}>
            <div className={Sty.user}>
          <div className={Sty.user_l_box}>
               <div className={Sty.user_l}>
            <Image
            src={detailData.nickAttr}
            width={32}
            height={32}
            fit='cover'
                   style={{ borderRadius: 16 }} />
                  <div className={Sty.nickName}>{ detailData.nickName}</div>
          </div>
          </div>
          <div className={Sty.user_r_item1}><i></i></div>
            </div>
             <div className={Sty.leaving}>
            { detailData.des}
          </div>
          </li>
         
         
        </ul>

      </div>
    
    </div>
      <div className={Sty.other}>
      <div className={Sty.other_title}>-其他话题-</div>
      <ul>
        <li>

        </li>
      </ul>
      </div>
    {/* 内容 */}
    <div className={Sty.detailData_bottom}>
      <div className={Sty.detailData_weaf_l}>
        <div><i></i><p>点赞</p></div>
     
       
      </div>
      <div className={Sty.weaf_c}>
         <input type="text" placeholder='请输入您要发布的评论'  />
       </div>
      <div className={Sty.detailData_bottom_r}>
        发布评论
      </div>
    </div>
  </>
}